<template>
  <div id="terminalUser">
    <!-- <h1 class="title">终端用户管理</h1> -->
    <div class="content">
      <div class="tableWrap">
        <HETTable1
          ref="terminalUserTable"
          :tableData="data.tableData"
          :tHead="data.tHead"
          :total="data.total"
          :headerOperation="data.headerOperation"
          :checkBox="true"
          :keyName="'guardUserId'"
          @chooseData="chooseData"
          @getTableData="initTable"
        >
          <template #guardUsername>
            <el-table-column label="用户名">
              <template #default="scope">
                {{ scope.row.guardUsername }}&nbsp;&nbsp;<span v-show="scope.row.locked"
                  ><el-icon><Lock /></el-icon
                ></span>
              </template>
            </el-table-column>
          </template>
          <template #isDefault>
            <el-table-column label="是否默认账号">
              <template #default="scope">
                {{ scope.row.isDefault ? "是" : "否" }}
              </template>
            </el-table-column>
          </template>
          <template #createdAt>
            <el-table-column label="创建时间">
              <template #default="scope">
                <div>{{ moment(scope.row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</div>
              </template>
            </el-table-column>
          </template>
          <template #operation>
            <el-table-column label="操作">
              <template #default="scope">
                <el-text type="primary" class="cursor-pointer" @click="setPassword(scope.row)">修改密码</el-text>
              </template>
            </el-table-column>
          </template>
        </HETTable1>
      </div>
    </div>
    <addTerminalUser
      :dialogAsync="addUserDialog"
      :isEdit="isSetPassword"
      :showRole="false"
      :guardUsername="guardUsername"
      @addTerminalUser="handleAddTerminalUser"
      @setPassword="handleSetPassword"
      @closeDialog="addUserDialog = false"
    ></addTerminalUser>
    <!-- <setPassword></setPassword> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, markRaw } from "vue";
import {
  req_getAuthorUserCount,
  req_getAuthorUserList,
  req_addAuthorUser,
  req_setAuthorPassword,
  req_delAuthorUser,
} from "~/utils/axios/index.js";
import { Plus, Delete, Lock } from "@element-plus/icons-vue";
import addTerminalUser from "../TerminalUser/components/addTerminalUser.vue";
import moment from "moment";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
const treeStore = useTreeStore();
// treeStore.openTree();

const terminalUserTable = ref();
treeStore.treeLinkedTableRef = terminalUserTable;

const addUserDialog = ref(false);
const handleAddTerminalUser = (data) => {
  delete data.passwordConfirm;
  delete data.guardRoleId;
  req_addAuthorUser(data).then((res) => {
    res.data.succeed ? ElMessage.success("新建成功") : ElMessage.error("新建失败");
    addUserDialog.value = false;
    terminalUserTable.value.getTableData();
  });
};
const delTerminalUser = () => {
  let userIds = data.selectData.map((item) => {
    return item.guardUserId;
  });
  ElMessageBox.confirm("确定要删除选中的用户？", "删除终端用户", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
  }).then(() => {
    req_delAuthorUser(userIds).then((res) => {
      res.data.succeed ? ElMessage.success("删除成功") : ElMessage.error("删除失败");
      terminalUserTable.value.getTableData();
    });
  });
};
const data = reactive({
  tHead: [
    {
      label: "用户名",
      prop: "guardUsername",
      isCustom: true,
      slotName: "guardUsername",
    },
    {
      label: "默认账号",
      prop: "isDefault",
      isCustom: true,
      slotName: "isDefault",
    },
    {
      label: "创建时间",
      prop: "createdAt",
      isCustom: true,
      slotName: "createdAt",
    },
    {
      label: "操作",
      prop: "operation",
      isCustom: true,
      slotName: "operation",
    },
  ],
  tableData: [],
  total: null,
  headerOperation: [
    {
      name: "新增",
      icon: markRaw(Plus),
      handleClick: () => {
        isSetPassword.value = false;
        addUserDialog.value = true;
      },
    },
    {
      name: "删除",
      icon: markRaw(Delete),
      handleClick: delTerminalUser,
    },
  ],
  selectData: [],
});

const chooseData = (data1) => {
  data.selectData = data1;
};

const isSetPassword = ref(false);
const guardUsername = ref("");
const guardUserId = ref("");
const setPassword = (data) => {
  isSetPassword.value = true;
  guardUsername.value = data.guardUsername;
  guardUserId.value = data.guardUserId;
  addUserDialog.value = true;
};
const handleSetPassword = (data) => {
  let params = {
    guardUserId: guardUserId.value,
    passwordHash: data.passwordHash,
    passwordConfirm: data.passwordConfirm,
  };
  req_setAuthorPassword(params).then((res) => {
    res.data.succeed ? ElMessage.success("修改成功") : ElMessage.error("修改失败");
    addUserDialog.value = false;
  });
};

const initTable = async (initTableParams) => {
  terminalUserTable.value.loading();
  let params = {
    $skip: initTableParams.page * initTableParams.size,
    $limit: initTableParams.size,
  };
  try {
    const { data: res } = await req_getAuthorUserList(params);
    const { data: count } = await req_getAuthorUserCount();
    terminalUserTable.value.finish();
    data.tableData = res || [];
    data.total = count || 0;
  } catch (err) {
    terminalUserTable.value.finish();
  }
};
</script>

<style lang="scss" scoped>
#terminalUser {
  .back {
    display: flex;
    align-items: center;
    margin: 0 0 10px -10px;
  }

  .link {
    margin: 0 5px;
    color: #951297;
    cursor: pointer;
  }
  .edit-disabled,
  .del-btn {
    color: #c282c3;
    pointer-events: none;
    cursor: default;
  }
  .item-card {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 0 15px 5px;
    h6 {
      font-size: 16px;
      color: #333;
      padding: 15px 0;
    }
    :deep(.el-input) {
      width: 30%;
    }
  }
  .btns {
    display: flex;
  }
}
</style>
